<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link id="flipper-theme-import" rel="stylesheet" href="themes/light.css">
    <link rel="stylesheet" href="graphiql/graphiql.css">
    <link rel="stylesheet" href="vis/vis.min.css">
    <title>Flipper</title>

    <style>

      #loading {
        -webkit-app-region: drag;
        z-index: 999999;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 50px;
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #525252;
        text-align: center;
      }

      .__infinity-dev-box-error {
        background-color: #000;
        font-family: monospace;
        white-space: pre;
        font-size: 16px;
      }

    </style>
  </head>
  <body>
    <div id="root">
      <div id="loading">
        Loading...
      </div>
    </div>


    <div class="__infinity-dev-box __infinity-dev-box-error" hidden>

    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      (function() {
        global.electronRequire = window.require;

        let suppressErrors = false;

        const socket = io(location.origin);

        socket.on('refresh', () => {
          location.reload();
        });

        socket.on('hasErrors', (html) => {
          openError(html);
          suppressErrors = true;
        });

        function openError(text) {
          if (suppressErrors) {
            return;
          }

          const box = document.querySelector('.__infinity-dev-box-error');
          box.removeAttribute('hidden');
          box.textContent = text;
        }

        function init() {
          const script = document.createElement('script');
          script.src = window.process.env.BUNDLE_URL;

          script.onerror = () => {
            openError('Script failure. Check Chrome console for more info.');
          };

          window.addEventListener('flipper-store-ready', () => global.Flipper.init());

          document.body.appendChild(script);
        }
        init();
      })();
    </script>
  </body>
</html>
